<template>
	<div class="login-wrapper">
		<el-card class="box-card login-form">
			<h3 class="title">核心后台管理系统</h3>
			<el-form :model="form" :rules="rules" ref="loginForm">
				<el-form-item prop="mobile" class="el-form-item-wrapper">
					<el-input
						v-model.trim="form.mobile"
						prefix-icon="el-icon-user"
						maxlength="11"
						show-word-limit
						clearable
						placeholder="请输入手机号码"
					></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						v-model.trim="form.password"
						type="password"
						prefix-icon="el-icon-unlock"
						maxlength="16"
						show-word-limit
						clearable
						placeholder="请输入密码"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-checkbox v-model="form.checked" class="mt-1">记住密码</el-checkbox>
				</el-form-item>
				<el-form-item>
					<el-button class="w_100" type="primary" @click="onSubmit" :loading="loading">
						{{ loading ? '登录中' : '登录' }}
					</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<p class="text-white text-center fixed-bottom mb-2">
			Copyright © 2021-2021 All Rights Reserved.
		</p>
	</div>
</template>
<script lang="ts">
	import { defineComponent, reactive, toRefs, onMounted, getCurrentInstance } from 'vue';
	import { isMobile, isPassword } from '@/utils/validate.ts';
	import { useFactoryStore } from '@/hooks/useFactoryStore';
	import { useFactoryRouter } from '@/hooks/useFactoryRouter';
	import { USER_ACTION } from '@/utils/Const';
	import { loginApi, getPermiApi } from '@/api/system.api.js';
	import { RouteLocationRaw } from 'vue-router';
	export default defineComponent({
		name: 'Login',
		setup() {
			const { action } = useFactoryStore({
				namespaced: 'user',
				actionsMethod: [USER_ACTION],
			});
			const { route, router } = useFactoryRouter();
			let ruleForm = null;
			let data = reactive({
				loading: false,
				mobile: '17621334566',
				form: {
					checked: false,
					mobile: '17621334566',
					password: '123456...',
				},
				rules: {
					mobile: [
						{
							required: true,
							validator: (rule, value, callback) => {
								if (!isMobile(value)) {
									callback(new Error('请输入11位合法的手机号码'));
								} else {
									callback();
								}
							},
							trigger: 'blur',
						},
					],
					password: [
						{
							required: true,
							validator: (rule, value, callback) => {
								if (!isPassword(value)) {
									callback(new Error('数字,字母，特殊字符，任意2种组合(6-16)位'));
								} else {
									callback();
								}
							},
							trigger: 'blur',
						},
					],
				},
			});
			const onSubmit = () => {
				ruleForm.validate(async valid => {
					if (valid) {
						data.loading = true;
						try {
							const loginRes = await loginApi(data.form);
							action[USER_ACTION](loginRes);
							const permiRes = await getPermiApi();

							router.push({
								path: route.query.redirect || '/dashboard',
							} as RouteLocationRaw);
							console.log('permiRes', permiRes);
						} finally {
							data.loading = false;
						}
					}
				});
			};
			onMounted(() => {
				ruleForm = getCurrentInstance().proxy.$refs['loginForm'];
			});
			return {
				onSubmit,
				...toRefs(data),
			};
		},
	});
</script>
<style lang="scss">
	.login-wrapper {
		width: 100%;
		height: 100%;
		background: url('~@/assets/images/login-background.jpg');
		background-size: cover;
		.title {
			margin: 0 auto 22px auto;
			text-align: center;
			color: #707070;
		}
		.login-form {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 360px;
			padding: 16px;
			border-radius: 6px;
			background-color: #fff;
			.el-card__body {
				.el-form {
					.el-form-item {
						margin-bottom: 0;
						.el-form-item__content {
							input:-internal-autofill-selected {
								background-color: #fff !important;
							}
						}
					}
					.el-form-item-wrapper {
						margin-bottom: 24px;
					}
				}
			}
		}
	}
</style>
